<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>LIST</title>
  <script th:src="@{/vue.js}"></script>
</head>
<body>
  <h2>列表展示</h2>
  <div id="app">
    <table border="1">
      <thead>
        <tr>
          <td>id</td>
          <td>username</td>
          <td>password</td>
          <td>operator</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td v-text="item.id"></td>
          <td v-text="item.username"></td>
          <td v-text="item.password"></td>
          <td><a :href="'/account/user/'+item.id" @click="remove">删除</a></td>
        </tr>
      </tbody>
    </table>
    <form method="post" id="form">
      <input type="hidden" name="_method" value="delete">
    </form>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        list: [],
        baseUrl: ''
      },
      created() {
        this.baseUrl = location.origin;
        fetch(this.baseUrl + '/account/users', {
          method: 'get'
        }).then(res => res.json()).then(res => {
          if(res.success) {
            this.list = res.data || [];
          }
        })
      },
      methods: {
        remove(e) {
          let ele = document.querySelector('#form');
          ele.action = e.target.href;
          ele.submit();
          e.preventDefault();
        }
      }
    })
  </script>
</body>
</html>